<template>
  <view class="container">
    <view class="address" @click="toAddress">
      <view class="left" v-if="addressData">
        <view class="city">
          {{ addressData.province }} {{ addressData.city }} {{ addressData.district }}
        </view>
        <view class="info">
          {{ addressData.address }}
        </view>
        <view class="user">
          <text>{{ addressData.name }}</text
          ><text>{{ addressData.mobile }}</text>
        </view>
      </view>
      <image class="right-img" :src="$img_path('/mall/16.png')" mode="widthFix"></image>
    </view>
    <view class="i-shop" v-for="(itemOrder, i) in lists" :key="itemOrder.shop_id">
      <view class="goods-box">
        <view class="goods">
          <view class="item" v-for="(item, idx) in itemOrder.products" :key="idx">
            <ItemBox
              :styleType="2"
              :title_row="1"
              :goodsDetail="item"
              :imageStyle="{ width: '180rpx', height: '180rpx' }"
              nameFontSize="34rpx"
            >
              <text slot="center" class="spec" style="margin-top: 16rpx; display: block">{{
                item.sku.difference.join("/")
              }}</text>
              <view slot="priceBox" class="price-box" v-if="item && item.sku">
                <view class="left">
                  ¥<text>{{
                    gPrice(item.groupType == "alone" ? item.sku.market_price : item.sku.price)[0]
                  }}</text
                  >{{ gPrice(item.groupType == "alone" ? item.sku.market_price : item.sku.price)[1] }}
                </view>
                <view class="right">
                  <view class="r-inp">
                    <image
                      :src="$img_path('/mall/13.png')"
                      @click="editNumber(i, idx, 'jian')"
                      mode="widthFix"
                    ></image>
                    <input type="number" v-model="item.number" @blur="editNumBlur($event, i, idx)" />
                    <image
                      :src="$img_path('/mall/12.png')"
                      @click="editNumber(i, idx, 'add')"
                      mode="widthFix"
                    ></image>
                  </view>
                </view>
              </view>
            </ItemBox>
          </view>
        </view>
        <view class="freight row-con">
          <text>订单运费</text>
          <view class="r-box"> ¥ {{ itemOrder.freight_price_bak }} </view>
        </view>
        <view class="remark row-con">
          <text>备注</text>
          <view class="r-box" @click="showRmark">
            <text>{{ remark ? "已备注" : "无备注" }}</text>
            <image :src="$img_path('/common/icon_r.png')" mode="widthFix"></image>
          </view>
        </view>
      </view>

      <view class="con-box">
        <view class="all-price row-con">
          <view class="label">
            商品总价<text>共{{ itemOrder.number }}件商品</text>
          </view>
          <view class="r-box"> ¥ {{ itemOrder.sub_price }} </view>
        </view>
        <view class="coupon row-con">
          <view class="label"> 优惠券 </view>
          <view class="r-box" @click="showCoupon(itemOrder, i)">
            <text>{{
              itemOrder.s_coupon
                ? itemOrder.s_coupon.type == "reduction"
                  ? "-￥" + itemOrder.s_coupon.price
                  : itemOrder.s_coupon.discount + "折"
                : "-￥0.00"
            }}</text>
            <image :src="$img_path('/common/icon_r.png')" mode="widthFix"></image>
          </view>
        </view>
      </view>
    </view>

    <view class="bottom-btn pb-con">
      <view class="b-box pb-con">
        <view class="con-box">
          <view class="left">
            <!-- ￥<text>{{gPrice(statis.allsub)[0]}}</text>{{gPrice(statis.allsub)[1]}} -->
            ￥<text>{{ gPrice(allPrice)[0] }}</text
            >{{ gPrice(allPrice)[1] }}
          </view>

          <view class="right">
            <button @click="submitOrder">提交订单</button>
          </view>
        </view>
      </view>
    </view>

    <!-- 备注 -->
    <popupBox ref="remark" type="bottom" :isSlot="true">
      <view class="remark-box">
        <view class="top">
          <view class="cancel" @click="closeRemark"> 取消 </view>
          <view class="title"> 备注 </view>
          <view class="confirm" @click="confirmRemark"> 提交 </view>
        </view>

        <view class="textarae">
          <textarea v-model="b_remark" maxlength="200" placeholder="无备注"></textarea>
        </view>
        <view class="tip"> 最多可输入200个字 </view>
      </view>
    </popupBox>

    <!-- 优惠券 -->
    <popupBox ref="coupon" type="bottom" :isSlot="true">
      <view class="coupon-popup">
        <view class="title">
          <text>优惠券</text>
          <image :src="$img_path('/course/close_popup.png')" @click="closeCoupon" mode="widthFix"></image>
        </view>
        <view class="tab">
          <!-- <view class="item" :class="coupon_tab==1?'select':''" @click="tabCheck(1)">
						<text>可使用优惠券(2)</text>
					</view>
					<view class="item" :class="coupon_tab==2?'select':''" @click="tabCheck(2)">
						<text>不可使用优惠券(2)</text>
					</view> -->
        </view>
        <view class="coupon-box">
          <view class="item" v-for="(item, i) in couponList" :key="item.id" @click="checkCoupon(item)">
            <image class="bg" :src="$img_path('/course/coupon.png')" mode="scaleToFill"></image>
            <view class="c_num">
              <view class="price" v-if="item.type == 'reduction'">
                <text>￥</text>{{ Number(item.price) }}
              </view>
              <view class="price" v-else> {{ Number(item.discount) }}<text>折</text> </view>
              <text>满{{ item.limit }}可用</text>
            </view>
            <view class="c_info">
              <text class="xz">{{ item.name }}</text>
              <view class="c_box">
                {{ item.validity ? "有效期至" + item.enddate : "永久有效" }}
              </view>
              <view class="time">
                {{ item.rangetype_text }}使用
                <image :src="$img_path('/course/coupon_3.png')" mode="widthFix"></image>
              </view>
            </view>
            <image
              class="checkImg"
              v-if="item.state && s_coupon && s_coupon.id == item.id"
              :src="$img_path('/course/coupon_2.png')"
              mode="widthFix"
            ></image>
            <image
              class="checkImg"
              v-if="item.state && (!s_coupon || !s_coupon.id)"
              :src="$img_path('/course/coupon_1.png')"
              mode="widthFix"
            ></image>
            <view class="lq" v-if="!item.state">
              <button @click.stop="lqCoupon(item)">领取</button>
            </view>
            <view class="not_use" v-if="coupon_tab == 2">
              <button>不可使用</button>
            </view>
          </view>
        </view>
        <view class="btn">
          <view class="b-box">
            <button v-if="coupon_tab == 1" @click="sub_coupon">确认</button>
          </view>
        </view>
      </view>
    </popupBox>
    <!-- 支付 -->
    <popupBox ref="pay" type="bottom" :isSlot="true">
      <view class="pay-box">
        <view class="top">
          <image
            :src="$img_path('/course/close_popup.png')"
            @click="$refs.pay.close()"
            mode="widthFix"
          ></image>
        </view>
        <view class="price" v-if="addInfo">
          <view class="num"> <text>￥</text>{{ addInfo.price }} </view>
        </view>
        <view class="pay-type">
          <view class="item" @click="checkPayType(0)">
            <view class="left">
              <image :src="$img_path('/course/pay_1.png')" mode="widthFix"></image>
              <view class="name">
                <text>微信支付</text>
              </view>
            </view>
            <view class="right">
              <image
                v-if="pay_type == 0"
                :src="$img_path('/course/pay_checkbox1.png')"
                mode="widthFix"
              ></image>
              <image v-else :src="$img_path('/course/pay_checkbox2.png')" mode="widthFix"></image>
            </view>
          </view>
          <view class="item" @click="checkPayType(1)">
            <view class="left">
              <image :src="$img_path('/course/pay_2.png')" mode="widthFix"></image>
              <view class="name">
                <text>第三方支付</text>
              </view>
            </view>
            <view class="right">
              <image
                v-if="pay_type == 1"
                :src="$img_path('/course/pay_checkbox1.png')"
                mode="widthFix"
              ></image>
              <image v-else :src="$img_path('/course/pay_checkbox2.png')" mode="widthFix"></image>
            </view>
          </view>
          <view class="item" @click="checkPayType(2)">
            <view class="left">
              <image :src="$img_path('/course/pay_3.png')" mode="widthFix"></image>
              <view class="name">
                <text>余额</text>
                <text>余额：¥ {{ Balance }}</text>
              </view>
            </view>
            <view class="right">
              <image
                v-if="pay_type == 2"
                :src="$img_path('/course/pay_checkbox1.png')"
                mode="widthFix"
              ></image>
              <image v-else :src="$img_path('/course/pay_checkbox2.png')" mode="widthFix"></image>
            </view>
          </view>
        </view>

        <view class="btn">
          <view class="b-box">
            <button @click="payOrder">确认支付</button>
          </view>
        </view>
      </view>
    </popupBox>
  </view>
</template>

<script>
import {
  groupsOrderGoodsList,
  queryCouponList,
  getBalance,
  groupsAddOrder,
  payment,
  receiveCoupon,
} from "@/utils/api/mallApi.js";
import ItemBox from "../../components/service-box/mall-item-box.vue";
import popupBox from "../../components/popup/popup.vue";
export default {
  components: {
    ItemBox,
    popupBox,
  },
  data() {
    return {
      coupon_tab: 1,
      goods_id: null,
      addressData: null, //地址信息
      lists: [],
      statis: null,
      coupon: null,
      remark: "",
      b_remark: "",
      orderToken: "",
      couponState: "1",
      order_type: "",
      pay_type: "0", //0 wx,1 other, 2 余额

      Balance: 0,

      payment_info: null,
      n_order: null,
      couponList: [], //优惠券
      s_c_index: null,
      s_coupon: null,
      allPrice: "",

      addInfo: null,
    };
  },
  computed: {
    // 总价
    totalPrice() {
      let all = 0;
      this.lists.forEach((e) => {
        let i_price =
          Number(e.products[0].number) *
          (this.order_type == "alone"
            ? Number(e.products[0].sku.market_price)
            : Number(e.products[0].sku.price));
        if (e.coupon_id) {
          if (e.s_coupon.type == "reduction") {
            //满减
            i_price = i_price - Number(e.s_coupon.price);
          } else {
            i_price = i_price - Number(e.s_coupon.discount);
          }
        }
      });
      return all.toFixed(2);
    },
  },
  onLoad(options) {
    this.goods_id = options.id;
    this.order_type = options.type;
    this.getOrderInfo(JSON.parse(options.data));
    // this.MyCouponList()
    this.getBalance();
  },
  onShow() {
    uni.$once("checkAddress", this.getAddress);
  },
  methods: {
    // 选择地址返回
    getAddress(val) {
      console.log(val, "address");
      this.addressData = val;
      this.$forceUpdate();
    },

    // 修改地址
    toAddress() {
      uni.navigateTo({
        url: "/pagesMine/address/index?prev=1",
      });
    },
    subAllPrice() {
      let all = 0;
      this.lists.forEach((e) => {
        let i_price =
          Number(e.products[0].number) *
          (this.order_type == "alone"
            ? Number(e.products[0].sku.market_price)
            : Number(e.products[0].sku.price));
        if (e.coupon_id) {
          // if(e.s_coupon.type=='reduction'){//满减
          // 	i_price = i_price - Number(e.s_coupon.price)
          // }else{
          // 	i_price = i_price*(Number(e.s_coupon.discount) / 10)
          // }
          i_price = i_price - Number(e.s_coupon.price);
          all += i_price;
        } else {
          all += i_price;
        }
      });
      this.allPrice = all.toFixed(2);
    },

    // 获取账户余额
    getBalance() {
      getBalance().then((res) => {
        this.Balance = res.data;
      });
    },

    showCoupon(data, i) {
      this.s_c_index = i;
      if (this.lists[i].coupon_id) {
        this.s_coupon = this.lists[i].s_coupon;
      }
      this.MyCouponList(data);
    },
    // 我的优惠券
    MyCouponList(data) {
      this.n_order = data;
      queryCouponList({
        goods_id: this.goods_id,
        price: this.statis.allsub,
        shop_category_id: data.products[0].shop_category_id,
        shop_id: data.shop_id,
      }).then((res) => {
        this.couponList = res.data;

        this.$refs.coupon.open();
      });
    },
    closeCoupon() {
      this.$refs.coupon.close();
      this.s_coupon = null;
    },
    // 选择优惠券
    checkCoupon(data) {
      if (this.s_coupon && this.s_coupon.id == data.id) {
        return (this.s_coupon = null);
      }
      this.s_coupon = data;
      this.$forceUpdate();
    },
    // 确定选择优惠券
    sub_coupon() {
      if (this.s_coupon) {
        this.lists[this.s_c_index].s_coupon = JSON.parse(JSON.stringify(this.s_coupon));
        this.lists[this.s_c_index].coupon_id = this.s_coupon.id;
      } else {
        this.lists[this.s_c_index].s_coupon = null;
        this.lists[this.s_c_index].coupon_id = null;
      }

      this.closeCoupon();
      this.subAllPrice();
    },

    // 领取
    lqCoupon(item) {
      receiveCoupon({ id: item.id }).then((res) => {
        uni.showToast({
          title: "领取成功",
          icon: "none",
        });
        this.MyCouponList(this.n_order);
      });
    },

    // 订单详情
    getOrderInfo(data) {
      uni.showLoading();
      groupsOrderGoodsList({ data: data }).then((res) => {
        this.addressData = res.data.addressData;
        this.lists = res.data.orderData.lists;
        this.statis = res.data.orderData.statis;
        this.orderToken = res.data.token;
        uni.hideLoading();
        this.subAllPrice();
      });
    },

    // 数量修改
    editNumber(p_i, idx, type) {
      let n = this.lists[p_i].products[idx].number;
      let obj = this.lists[p_i];
      if (type == "jian" && n > 1) {
        obj.products[idx].number--;
        this.$set(this.lists, p_i, obj);
      }
      if (type == "add" && n < this.lists[p_i].products[idx].sku.stock) {
        obj.products[idx].number++;
        this.$set(this.lists, p_i, obj);
      }
      this.subAllPrice();
    },
    editNumBlur(e, p_i, idx) {
      let n = this.lists[p_i].products[idx].number;
      let obj = this.lists[p_i];
      if (e.detail.value > this.lists[p_i].products[idx].sku.stock) {
        uni.showToast({
          title: "库存剩余不足",
          icon: "none",
        });
        obj.products[idx].number = this.lists[p_i].products[idx].sku.stock;
        this.$set(this.lists, p_i, obj);
      }
      this.subAllPrice();
    },

    showRmark() {
      this.$refs.remark.open();
      this.b_remark = this.remark;
    },
    closeRemark() {
      this.$refs.remark.close();
    },
    confirmRemark() {
      this.remark = this.b_remark;
      this.closeRemark();
    },

    tabCheck(i) {
      this.coupon_tab = i;
    },

    checkPayType(type) {
      this.pay_type = type;
    },

    submitOrder() {
      uni.showLoading({
        title: "Loading...",
      });
      this.lists.forEach((e) => {
        if (!this.s_coupon) {
          e.coupon_id = "";
        }
        e.products.forEach((s) => {
          s.goods_id = s.id;
          s.sku_id = s.sku.id;
        });
      });

      groupsAddOrder({
        order: {
          address_id: this.addressData.id,
          lists: this.lists,
        },
        token: this.orderToken,
      }).then((res) => {
        this.addInfo = res.data.list[0];
        uni.hideLoading();
        this.$refs.pay.open();
        this.payment_info = {
          order_id: res.data.list[0].order_id,
          token: res.data.token,
        };
      });
    },

    payOrder() {
      uni.showLoading({
        title: "Loading...",
      });
      payment({
        order_id: this.payment_info.order_id,
        type: this.pay_type == 2 ? "balance" : this.pay_type == 0 ? "wechat" : "",
        token: this.payment_info.token,
        order_type: "groups",
      }).then((res) => {
        let pay_info = {
          price: this.statis.allsub,
          type: this.pay_type,
        };
        if (res.code == 1) {
          if (this.pay_type == 2) {
            uni.navigateTo({
              url: "/pagesMall/order/paysuccess?info=" + JSON.stringify(pay_info),
            });
          } else {
            uni.requestPayment({});
          }
        }
        uni.hideLoading();
      });
    },

    // payOrder(){
    // 	uni.navigateTo({
    // 		url:'/pagesMall/order/paysuccess'
    // 	})
    // }
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 0 22rpx 20rpx;
  box-sizing: border-box;
  .address {
    margin-top: 30rpx;
    background: #ffffff;
    border-radius: 20rpx;
    padding: 24rpx 20rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      display: flex;
      flex-direction: column;
      .city .info {
        font-weight: bold;
        font-size: 32rpx;
        color: #333333;
        line-height: 44rpx;
      }
      .info {
        margin-top: 12rpx;
      }
      .user {
        font-weight: bold;
        font-size: 26rpx;
        color: #333333;
        line-height: 36rpx;
        margin-top: 10rpx;
      }
    }
    .right-img {
      width: 40rpx;
      height: 40rpx;
    }
  }

  .goods-box {
    padding: 24rpx 22rpx 0;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 20rpx;
    margin-top: 20rpx;
    .goods {
      padding: 0 0 6rpx;
      border-bottom: 2rpx solid #f5f5f5;
      .item {
        margin-bottom: 24rpx;

        .spec {
          font-weight: bold;
          font-size: 28rpx;
          color: #333333;
          line-height: 40rpx;
          margin-top: 10rpx;
        }
        .price-box {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-left: 14rpx;
          box-sizing: border-box;
          .left {
            font-weight: 600;
            font-size: 34rpx;
            color: #ff2e2e;
            line-height: 58rpx;
            text {
              font-size: 42rpx;
            }
          }
          .right {
            .r-inp {
              display: flex;
              align-items: center;
              image {
                width: 44.8rpx;
                height: 44.8rpx;
              }
              input {
                width: 68rpx;
                height: 44.8rpx;
                padding: 0 10rpx;
                box-sizing: border-box;
                text-align: center;
              }
            }
          }
        }
      }
    }
    .row-con {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx 0;
      box-sizing: border-box;
      &:not(:last-child) {
        border-bottom: 2rpx solid #f5f5f5;
      }
      & > text {
        font-weight: bold;
        font-size: 34rpx;
        color: #333333;
        line-height: 48rpx;
      }
      .r-box {
        display: flex;
        align-items: center;
        font-weight: 400;
        font-size: 30rpx;
        color: #333333;
        line-height: 42rpx;
        & > image {
          width: 24rpx;
          height: 24rpx;
        }
      }
    }
  }
  .con-box {
    padding: 0 22rpx;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 20rpx;
    margin-top: 20rpx;
    .row-con {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx 0;
      box-sizing: border-box;
      &:not(:last-child) {
        border-bottom: 2rpx solid #f5f5f5;
      }
      .label {
        font-weight: bold;
        font-size: 34rpx;
        color: #333333;
        line-height: 48rpx;
        text {
          font-weight: bold;
          font-size: 28rpx;
          color: #999999;
          line-height: 40rpx;
          margin-left: 8rpx;
        }
      }
      .r-box {
        display: flex;
        align-items: center;
        font-weight: 400;
        font-size: 30rpx;
        color: #333333;
        line-height: 42rpx;
        & > image {
          width: 24rpx;
          height: 24rpx;
        }
      }
    }
  }

  .bottom-btn {
    width: 100%;
    height: 130rpx;
    .b-box {
      width: 100%;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ffffff;
      box-shadow: 0rpx -4rpx 8rpx 2rpx rgba(0, 0, 0, 0.05);
      .con-box {
        padding: 16rpx 22rpx 10rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 0;
        .left {
          font-weight: bold;
          font-size: 28rpx;
          color: #e72a2a;
          line-height: 64rpx;
          text {
            font-size: 48rpx;
          }
        }
        .right {
          button {
            width: 276rpx;
            height: 96rpx;
            background: linear-gradient(90deg, #ffa233 0%, #fb4c4c 100%);
            border-radius: 49rpx;
            font-weight: bold;
            font-size: 36rpx;
            color: #ffffff;
            line-height: 96rpx;
          }
        }
      }
    }
  }
}

.remark-box {
  padding: 36rpx 22rpx 300rpx;
  box-sizing: border-box;
  .top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    .cancel {
      font-weight: bold;
      font-size: 30rpx;
      color: #333333;
      line-height: 42rpx;
    }
    .title {
      font-weight: bold;
      font-size: 36rpx;
      color: #333333;
      line-height: 50rpx;
    }
    .confirm {
      font-weight: bold;
      font-size: 30rpx;
      color: #e72a2a;
      line-height: 42rpx;
    }
  }
  .textarae {
    width: 100%;
    height: 360rpx;
    background: #f8f8f8;
    border-radius: 16rpx;
    border: 2rpx solid #f5f5f5;
    padding: 24rpx 28rpx;
    box-sizing: border-box;
    margin-top: 62rpx;
    textarea {
      width: 100%;
      height: 100%;
    }
  }
  .tip {
    font-weight: bold;
    font-size: 28rpx;
    color: #333333;
    line-height: 40rpx;
    margin-top: 20rpx;
  }
}

.coupon-popup {
  padding: 40rpx 0 0;
  background-color: #ffffff;
  .title {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text {
      font-weight: bold;
      font-size: 32rpx;
      color: #000000;
      line-height: 44rpx;
    }
    image {
      width: 32rpx;
      height: 32rpx;
      position: absolute;
      right: 30rpx;
      top: 0;
    }
  }
  .tab {
    display: flex;
    align-items: center;
    padding: 46rpx 62rpx 56rpx;
    justify-content: space-between;
    box-sizing: border-box;
    background-color: #ffffff;
    .item {
      text {
        font-weight: 400;
        font-size: 32rpx;
        color: #999999;
        line-height: 44rpx;
        position: relative;
      }
      &.select {
        text {
          font-weight: bold;
          color: #e72a2a;
        }
        text::before {
          position: absolute;
          content: "";
          width: 72rpx;
          height: 8rpx;
          background: #e72a2a;
          border-radius: 8rpx 8rpx 8rpx 8rpx;
          top: calc(100% + 4rpx);
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
  }
  .coupon-box {
    padding: 0rpx 30rpx 38rpx;
    max-height: 680rpx;
    overflow-y: auto;
    .item {
      width: 100%;
      height: 186rpx;
      position: relative;
      &:not(:last-child) {
        margin-bottom: 30rpx;
      }
      & > image.bg {
        width: 100%;
        height: 100%;
      }
      .c_num {
        position: absolute;
        left: 40rpx;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        .price {
          font-weight: bold;
          font-size: 48rpx;
          color: #fd845c;
          line-height: 66rpx;
          text {
            font-size: 30rpx;
          }
        }
        & > text {
          font-weight: 400;
          font-size: 20rpx;
          color: #666666;
          line-height: 28rpx;
          margin-top: 8rpx;
        }
      }
      .c_info {
        position: absolute;
        left: 204rpx;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        .xz {
          font-weight: 400;
          font-size: 22rpx;
          color: #333333;
          line-height: 32rpx;
        }
        .c_box {
          font-weight: 400;
          font-size: 20rpx;
          color: #666666;
          line-height: 28rpx;
          margin-top: 6rpx;
        }
        .time {
          font-weight: 400;
          font-size: 20rpx;
          color: #e72a2a;
          line-height: 28rpx;
          margin-top: 18rpx;
          display: flex;
          align-items: center;
          image {
            width: 16.37rpx;
            height: 12rpx;
            margin-left: 15rpx;
          }
        }
      }
      .checkImg {
        position: absolute;
        right: 30rpx;
        top: 50%;
        transform: translateY(-50%);
        width: 48rpx;
        height: 48rpx;
      }
      .lq {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        border-radius: 30rpx;
        button {
          width: 138rpx;
          height: 48rpx;
          background: #eee01c;
          border-radius: 48rpx;
          font-weight: bold;
          font-size: 26rpx;
          color: #ffffff;
          line-height: 48rpx;
          margin-right: 26rpx;
        }
      }
      .not_use {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        display: flex;
        justify-content: flex-end;
        align-items: center;
        border-radius: 30rpx;
        button {
          width: 138rpx;
          height: 48rpx;
          background: #999999;
          border-radius: 48rpx;
          font-weight: bold;
          font-size: 26rpx;
          color: #ffffff;
          line-height: 48rpx;
          margin-right: 26rpx;
        }
      }
    }
  }

  .btn {
    padding: 20rpx 30rpx;
    // box-shadow: 0rpx -4rpx 8rpx 2rpx rgba(0,0,0,0.05);
    // background: #FFFFFF;
    .b-box {
      width: 100%;
      height: 96rpx;
    }
    button {
      width: 100%;
      height: 96rpx;
      background: linear-gradient(90deg, #ffa233 0%, #fb4c4c 100%);
      border-radius: 80rpx 80rpx 80rpx 80rpx;
      font-weight: bold;
      font-size: 32rpx;
      color: #ffffff;
      line-height: 96rpx;
    }
  }
}
.pay-box {
  .top {
    padding: 48rpx 22rpx 0;
    image {
      width: 32rpx;
      height: 32rpx;
    }
  }
  .price {
    padding: 85rpx 0 0;
    .num {
      text-align: center;
      font-weight: 900;
      font-size: 68rpx;
      color: #ff2e2e;
      line-height: 68rpx;
      text {
        font-weight: 400;
        font-size: 30rpx;
      }
    }
  }
  .pay-type {
    padding: 83rpx 22rpx 0;
    .item {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      &:not(:first-child) {
        margin-top: 58rpx;
      }
      .left {
        display: flex;
        align-items: flex-start;
        image {
          width: 48rpx;
          height: 48rpx;
        }
        .name {
          display: flex;
          flex-direction: column;
          text {
            font-weight: bold;
            font-size: 32rpx;
            color: #000000;
            line-height: 48rpx;
            margin-left: 16rpx;
            &:nth-child(2) {
              font-weight: bold;
              font-size: 26rpx;
              color: #000000;
              line-height: 36rpx;
              margin-top: 6rpx;
            }
          }
        }
      }
      .right {
        image {
          width: 48rpx;
          height: 48rpx;
        }
      }
    }
  }
  .btn {
    padding: 92rpx 30rpx 20rpx;
    // box-shadow: 0rpx -4rpx 8rpx 2rpx rgba(0,0,0,0.05);
    // background: #FFFFFF;
    .b-box {
      width: 100%;
      height: 96rpx;
    }
    button {
      width: 100%;
      height: 96rpx;
      background: linear-gradient(90deg, #ffa233 0%, #fb4c4c 100%);
      border-radius: 80rpx 80rpx 80rpx 80rpx;
      font-weight: bold;
      font-size: 32rpx;
      color: #ffffff;
      line-height: 96rpx;
    }
  }
}
</style>
